<template>
	<view class="capacity">
        <view class="u-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
        <view class="commonHeader">承载量和销售曲线</view>
<!--        <view class="capacitySearch">-->
<!--            <view class="capacityText">-->
<!--                从-->
<!--            </view>-->
<!--            <view class="capacitySearchInput" @tap="showCal">-->
<!--                <view>{{startDate}}</view>-->
<!--                <image src="@/static/images/xiala-5.png" class="capacityInputImg"></image>-->
<!--            </view>-->
<!--            <view class="capacitySearchText">-->
<!--                到-->
<!--            </view>-->
<!--            <view class="capacitySearchInput" @tap="showCal">-->
<!--                <view>{{endDate}}</view>-->
<!--                <image src="@/static/images/xiala-5.png" class="capacityInputImg"></image>-->
<!--            </view>-->
<!--            <image src="@/static/images/sousuo-5.png" class="capacityImg"></image>-->
<!--        </view>-->
        <u-calendar v-model="showCalendar" mode="range" @change="changeCalendar"></u-calendar>
        <view class="capacityTabList">
            <view class="tabList">
                <u-tabs :list="listTabs" :is-scroll="false" :current="currentTab" @change="changeTabs"></u-tabs>
            </view>
            <view class="dropdown">
                <u-dropdown>
                    <u-dropdown-item v-model="dateRange" :title="dateList[dateRange-1].label" :options="dateList"
                                     @change="changeRange"></u-dropdown-item>
                </u-dropdown>
            </view>
        </view>

<!--        <view class="subsection"><u-subsection :list="dateList" :current="1"></u-subsection></view>-->
        <view class="chartsTitle">{{listTabs[currentTab].name}}曲线图</view>
        <view class="charts-box">
            <qiun-data-charts
                    type="line"
                    :chartData="chartData"
                    background="none"
                    :opts="areapotion"
            />
        </view>
	</view>
</template>

<script>
    import { $http } from '../../static/common/js/http.js'
    // 获取系统状态栏的高度
    let systemInfo = uni.getSystemInfoSync();
	export default {
		data() {
			return {
                statusBarHeight: systemInfo.statusBarHeight,
                areapotion:{},
                showCalendar: false,
                endDate: "2020-06-04", // 选择的结束日期
                startDate: "2020-06-01", // 选择的起始日期
                currentTab: 0,
                dateRange: 1,
                dateList: [{
                    label: '周视图',
                    value: 1,
                },
                    {
                        label: '日视图',
                        value: 2,
                    }
                ],
                listTabs: [{
                    name: '景区承载量'
                }, {
                    name: '销售数据'
                }],
                chartData: {},
                oneChartData: null,
                oneChartData1: null
			}
		},
		computed: {
		},
        onShow() {
            if(this.currentTab===1){
                this.dateList[1].label = '月视图'
                this.getData1()
            }else{
                this.dateList[1].label = '日视图'
                this.getData()
            }
		},
		methods: {
            setChartData(){
                const vm = this
                let _xAxis = [vm.getDay(7),vm.getDay(6), vm.getDay(5), vm.getDay(4), vm.getDay(3), vm.getDay(2), vm.getDay(1)];
                this.areapotion = {
                    xAxis: {
                        "labelCount": vm.dateRange===1?10:8
                    },
                }
                vm.chartData = {
                    "categories": vm.dateRange===1?_xAxis:vm.getHours24(),
                    "series": [
                        {
                            "name": "实时人流量",
                            color: '#0F81FF',
                            "data": vm.dateRange===1?Object.values(vm.oneChartData.peopleFlowByWeek):Object.values(vm.oneChartData.peopleFlow)
                        }
                    ]
                }
            },
            setChartData1(){
                const vm = this
                let _xAxis = [vm.getDay(7),vm.getDay(6), vm.getDay(5), vm.getDay(4), vm.getDay(3), vm.getDay(2), vm.getDay(1)];
                this.areapotion = {
                    xAxis: {
                        "labelCount": vm.dateRange===1?10:4 //默认显示个数
                    },
                }
                vm.chartData = {
                    "categories": vm.dateRange===1?_xAxis:vm.getOldMonth(),
                    "series": [
                        {
                            "name": "销售额",
                            color: '#0F81FF',
                            "data": vm.dateRange===1?Object.values(vm.oneChartData1.week):Object.values(vm.oneChartData1.month)
                        }
                    ],
                    xAxis:{
                        labelCount: 7
                    }
                }
            },
            getData(){
                const vm = this
                $http('/fenghuoImp/indexAct/app/traffic.html', 'post', {},
                    res => {
                        if(res){
                            vm.oneChartData = res.data
                            vm.setChartData()
                        }else{
                        }
                    },
                    err => {
                        console.log(err,'err')
                    }
                )
            },
            getData1(){
                const vm = this
                $http('/fenghuoImp/indexAct/app/sale.html', 'post', {},
                    res => {
                        if(res){
                            vm.oneChartData1 = res.data
                            vm.setChartData1()
                        }else{
                        }
                    },
                    err => {
                        console.log(err,'err')
                    }
                )
            },
            showCal(){
                this.showCalendar=true;
            },
            changeCalendar(e) {
                console.log(e);
                const vm = this
                vm.endDate=e.endDate // 选择的结束日期
                    vm.startDate=e.startDate// 选择的起始日期
            },
            changeTabs(e){
                console.log(e)
                const vm = this
                this.currentTab = e;
                if(e===1){
                    this.dateList[1].label = '月视图'
                    if(!vm.oneChartData1){
                        this.getData1()
                    }else{
                        this.setChartData1()
                    }
                }else{
                    this.dateList[1].label = '日视图'
                    if(!vm.oneChartData){
                        this.getData()
                    }else{
                        this.setChartData()
                    }
                }
            },
            changeRange(e){
                if(this.currentTab===0){
                    this.setChartData()
                }else{
                    this.setChartData1()
                }
            },
            updateData(e){
                this.currentTab = e;
                this.chartData = JSON.parse(JSON.stringify(this.chartData))
            },
        getHours24() {
            let arr = [];
            for (let i = 1; i < 25; i++) {
                arr.push(i + ":00");
            }
            return arr;
        },
            getDay(day){
                let today = new Date();
                let targetday_milliseconds=today.getTime() - 1000*60*60*24*day;
                today.setTime(targetday_milliseconds); //注意，这行是关键代码
                let tMonth = today.getMonth();
                let tDate = today.getDate();
                tMonth = this.doHandleMonth(tMonth + 1);
                tDate = this.doHandleMonth(tDate);
                return tMonth+"."+tDate;
            },
          doHandleMonth(month){
              let m = month;
        if(month.toString().length == 1){
            m = "0" + month;
        }
        return m;
    },
            getOldMonth() {
                let arr = [];
                let theMonths = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
                let nowDate = new Date();
                for (let i = 11; i >= 0; i--) {
                    let oldDate = new Date(nowDate.getFullYear(), nowDate.getMonth() - i, 1);
                    let year = oldDate.getFullYear();
                    let month = theMonths[oldDate.getMonth()];
                    arr.push(year + "/" + month);
                }
                return arr;
            }
		}
	}
</script>

<style lang="scss" scoped>
	.capacity {
        width: 100%;
        padding-bottom: 40rpx;
        background: url("../../static/images/bg25.png") no-repeat;
        /* 以父元素的百分比来设置背景图像的宽度和高度。*/
        background-size: 100% 100%;
        height: 100%;
        min-height: 100vh;
        .subsection{
            width: 60%;
            padding-right: 34rpx;
            margin-top: 60rpx;
            text-align: right;
           margin-left: auto;
        }
        .capacitySearch{
            display: flex;
            align-items: center;
            width: 100%;
            font-size: 32rpx;
            font-weight: bold;
            color: #101010;
            padding: 0 34rpx;
        }
        .capacitySearchInput{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 222rpx;
            height: 60rpx;
            background: #F0F0F0;
            border-radius: 30rpx;
            font-size: 26rpx;
            color: #999999;
            margin: 0 24rpx;
            /*padding: 0 24prx;*/
        }
        .capacityInputImg{
            width: 20rpx;
            height: 11rpx;
            margin-left: 18rpx;
        }
        .capacityImg{
            width: 46rpx;
            height: 46rpx;
            margin-left: auto;
        }
        .capacityTabList{
            margin-top: 60rpx;
            padding: 0 34rpx 0 0;
            display: flex;
            justify-content: space-between;
            .tabList{
                flex: 1;
                & /deep/ .u-tabs{
                    background-color: transparent!important;
                }
            }
            .dropdown{
                width: 200rpx;
            }
            /*width:70%;*/
        }
        .chartsTitle{
            font-size: 35rpx;
            text-align: center;
            font-weight: bold;
            color: #101010;
            margin: 80rpx 0;
        }
        .charts-box{
            width: 100%;
            height:300px;
        }
	}
</style>
